<script setup>
import { reactive, ref, watchEffect } from 'vue';
import * as api from '@/api/basic/house';
import { ElMessage } from 'element-plus';
import store from "@/store/index.js";

// form表单类============
let form = reactive({
    id: '',
    structureFullName: '',
    houseNum: '',
    thirdHouseId: '',
    houseFloor: '',
    buildingArea: '',
    innerArea: '',
    publicArea: '',
    houseType: '',
    houseStatus: '',
    resideDate: ''
})

const formSetter = (v) => {
    form.id = v?.id
    form.structureFullName= v?.structureFullName;
    form.houseNum = v?.houseNum;
    form.thirdHouseId = v?.thirdHouseId;
    form.houseFloor = v?.houseFloor;
    form.buildingArea = v?.buildingArea;
    form.innerArea = v?.innerArea;
    form.publicArea = v?.publicArea;
    form.houseType = v?.houseType
    form.houseStatus = v?.houseStatus
    form.resideDate = v?.resideDate
};
// ==============

const init = () => {
}
init()

const props = defineProps({
    data: Object
})

const visible = defineModel();

watchEffect(() => {
    formSetter(props.data)
})

const emit = defineEmits(['transfer','success'])

// 提交方法
const submit = () =>{
    console.log(form)
    api.update(form).then(res => {
        ElMessage({
              type: 'success',
              message: res.msg,
        })
        emit('success')
        visible.value = false
    })
}
</script>
<template>
    <div>
        <el-dialog v-model="visible" :title="form.id ? '修改' : '添加'" width="800">
            <el-form :model="form" label-position="right" label-width="90px">
              <el-form-item label="房屋：">
                <div>{{form.structureFullName}}</div>
              </el-form-item>
                <el-form-item label="房源名称：" >
                    <el-input v-model="form.structureFullName"/>
                </el-form-item>
              <div class="form-item">
                <el-form-item label="房号：" style="width: 366px;" >
                    <el-input v-model="form.houseNum"/>
                </el-form-item>
                <el-form-item label="房屋编码："  style="width: 366px;">
                    <el-input placeholder="请填写" v-model="form.thirdHouseId"/>
                </el-form-item>
              </div>
              <div class="form-item">
                <el-form-item label="所在楼层：" style="width: 366px;">
                  <el-input placeholder="请填写" v-model="form.houseFloor"/>
                </el-form-item>
                <el-form-item label="建筑面积：" style="width: 366px;">
                  <el-input v-model="form.buildingArea"
                  >
                    <template #suffix>m²</template>
                  </el-input>
                </el-form-item>
              </div>
              <div class="form-item">
                <el-form-item label="套内面积：" style="width: 366px;">
                  <el-input placeholder="请选择" v-model="form.innerArea">
                    <template #suffix>m²</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="公摊面积：" style="width: 366px;">
                  <el-input placeholder="请填写" v-model="form.publicArea">
                    <template #suffix>m²</template>
                  </el-input>
                </el-form-item>
              </div>
              <div class="form-item">
                <el-form-item label="房屋业态：" style="width: 366px;">
                    <el-select v-model="form.houseType" placeholder="请选择">
                      <el-option value="住宅" label="住宅"/>
                      <el-option value="公寓" label="公寓"/>
                      <el-option value="办公" label="办公"/>
                      <el-option value="厂房" label="厂房"/>
                      <el-option value="仓库" label="仓库"/>
                      <el-option value="商铺" label="商铺"/>
                      <el-option value="酒店" label="酒店"/>
                      <el-option value="别墅" label="别墅"/>
                      <el-option value="其他" label="其他"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="房屋状态：" style="width: 366px;">
                  <el-select v-model="form.houseStatus" placeholder="请选择">
                    <el-option value="未出售" label="未出售"/>
                    <el-option value="已出售" label="已出售"/>
                    <el-option value="已入伙" label="已入伙"/>
                    <el-option value="已入住" label="已入住"/>
                  </el-select>
                </el-form-item>
              </div>
              <div class="form-item">
                <el-form-item label="入住日期：" style="width:366px;">
                  <el-date-picker v-model="form.resideDate" style="width: 100%;" placeholder="选择日期" />
                </el-form-item>
              </div>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="visible = false" style="padding: 0 16px;">取消</el-button>
                    <el-button type="primary" @click="submit" :loading="store.state.loaded" style="padding: 0 16px;">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<style>
.form-item {
  display: flex;
  justify-content: space-between;
}
</style>
